<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>学生主页</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/ionicons.min.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
</head>

<body>
	<!--top menu-->
	<header>
		<img src="../StaticImages/client.png" alt="" width=64 height=64>
		<strong>抱团取暖在线考试系统</strong>
		<ul class="nav nav-tabs myTab-all" role="tablist" id="myTab">

			<li role="presentation" class="active"><a href="#myClass" role="tab" data-toggle="tab">我的课程</a></li>
			<li role="presentation"><a href="#history" role="tab" data-toggle="tab">历史成绩</a></li>
			<li role="presentation"><a href="#home" role="tab" data-toggle="tab" onclick="fetchUserInfo()">个人信息</a></li>
		</ul>


		<span id="userName" class="m-r-10">欢迎使用 <a href="index.html"> 退出</a></span>
	</header>



	<!-- section area -->
	<div class="section col-md-10  clearfix">


		<div class="tab-content">
			<div role="tabpanel" class="tab-pane panel panel-info fade in active" id="myClass">
				<div class="one">
					<i class="icon ion-ios-locked-outline "></i>
					<h3>计算机科学与技术</h3>
					<button type="button" class="btn btn-info" data-toggle="modal"
						data-target="#myModal1">开始考试！</button>
				</div>
				<div class="two">
					<i class="icon ion-android-bus "></i>
					<h3>软件工程</h3>

					<button type="button" class="btn btn-info" data-toggle="modal"
						data-target="#myModal2">开始考试！</button>
				</div>
				<div class="three">
					<i class="icon ion-android-bus "></i>
					<h3>人工智能</h3>

					<button type="button" class="btn btn-info" data-toggle="modal"
						data-target="#myModal3">开始考试！</button>
				</div>

			</div>




			<div role="tabpanel" class="tab-pane fade panel panel-info" id="history">
				<table class="history-table table table-striped">
					<thead>
						<tr>
							<th>课程</th>
							<th>排名</th>
							<th>成绩</th>
							<th>时间</th>
						</tr>
					</thead>
					<tbody id="history-tbody">
						<!-- 动态填充的行将放在这里 -->
					</tbody>
				</table>
			</div>


			<div role="tabpanel" class="tab-pane fade panel panel-info " id="home">
				<div class="panel-heading">
					<h3 class="panel-title">个人信息</h3>
				</div>
				<ul id="detailed" class="panel-body">
					<li>学号：<span id="student_id"></span></li>
					<li>姓名：<span id="student_name"></span></li>

				</ul>


			</div>
		</div>
	</div>


	<!--考试说明提醒模态框-->

	<!-- 按钮触发模态框 -->

	<!-- 模态框（Modal） -->
	<div class="modal fade" style="z-index: 1000;" id="myModal1" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						考试说明
					</h4>
				</div>
				<div class="modal-body">
					此次考试限时2小时,超时将自动提交。请合理分配考试时间。
				</div>
				<div class="modal-body">
					<h4>选择题：</h4>
					<p>分为单选题呵不定项题，单选题选对得分，
						不定项题全对得分，漏选扣分，选错不得分。</p>
				</div>
				<div class="modal-body">
					<h4>简答题：</h4>
					<p>请将思考过程及结果输入，只有结果不得分，可以以照片形式上传验算过程。</p>
				</div>

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						题型分布
					</h4>
				</div>
				<div class="modal-body">
					<ul class="modal-body-topic">
						<li>选择题:20题 每题3分</li>
						<li>简答题:4题 每题10分</li>

					</ul>
				</div>


				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary"
						onclick="window.location.href='testwaiting-CS.html';">开始考试</button>
					</button>
				</div>
			</div> /.modal-content
		</div><!-- /.modal -->
	</div>


	<div class="modal fade" style="z-index: 1000;" id="myModal2" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						考试说明
					</h4>
				</div>
				<div class="modal-body">
					此次考试限时2小时,超时将自动提交。请合理分配考试时间。
				</div>
				<div class="modal-body">
					<h4>选择题：</h4>
					<p>分为单选题呵不定项题，单选题选对得分，
						不定项题全对得分，漏选扣分，选错不得分。</p>
				</div>
				<div class="modal-body">
					<h4>简答题：</h4>
					<p>请将思考过程及结果输入，只有结果不得分，可以以照片形式上传验算过程。</p>
				</div>

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						题型分布
					</h4>
				</div>
				<div class="modal-body">
					<ul class="modal-body-topic">
						<li>选择题:20题 每题3分</li>
						<li>简答题:4题 每题10分</li>

					</ul>
				</div>


				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary"
						onclick="window.location.href='testwaiting-SE.html';">开始考试</button>
				</div>
			</div> /.modal-content
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" style="z-index: 1000;" id="myModal3" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						考试说明
					</h4>
				</div>
				<div class="modal-body">
					此次考试限时2小时,超时将自动提交。请合理分配考试时间。
				</div>
				<div class="modal-body">
					<h4>选择题：</h4>
					<p>分为单选题呵不定项题，单选题选对得分，
						不定项题全对得分，漏选扣分，选错不得分。</p>
				</div>
				<div class="modal-body">
					<h4>简答题：</h4>
					<p>请将思考过程及结果输入，只有结果不得分，可以以照片形式上传验算过程。</p>
				</div>

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						题型分布
					</h4>
				</div>
				<div class="modal-body">
					<ul class="modal-body-topic">
						<li>选择题:20题 每题3分</li>
						<li>简答题:4题 每题10分</li>

					</ul>
				</div>


				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary"
						onclick="window.location.href='testwaiting-AI.html';">开始考试</button>
				</div>
			</div> /.modal-content
		</div><!-- /.modal -->
	</div>
	<!-- section area end -->

	<!--footer area-->
	<div class="footer">
		<strong class="footer m-l-20">Copyright © 2024 <a href="#">抱团取暖</a>.All rights reserved.</strong>
	</div>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/common.js"></script>

	<script>//tab栏的逻辑实现
		$(function () {
			$('#myTab a:first').tab('show')
		})

		$('#myTab a').click(function (e) {
			e.preventDefault()
			$(this).tab('show')

		})
		var oMyTab = document.getElementById('myTab');
		var aLi = oMyTab.getElementsByTagName('li');
	</script>

	<script src="js/student.js"></script>
	<script>//个人信息获取
		function fetchUserInfo() {
			// 发送请求到后端API以获取用户信息
			$.ajax({
				url: '/student/adduserinfo',
				method: 'POST', // 或者 'GET'，取决于你的API设计
				contentType: 'application/json',
				success: function (data) {
					if (data.message == "OK") {
						$('#student_id').text(data.id);
						$('#student_name').text(data.name);
					}
					if (data.message == "Student ID not exsit")
						alert("你的学生ID已失效");
				},
				error: function (xhr, status, error) {
					alert("获取数据失败");
					console.error('Error fetching user info:', error);
				}
			});
		}

	</script>

</body>

</html>